<template>
  <div id="header">
    <div class="nav-global">
      <div class="container">
        <h1 class="nav-logo">
          <a href="javascript:;"></a>
        </h1>
        <ul class="nav-aside">
          <li class="nav-user">
            <a href="javascript:;">个人中心</a>
            <!--active-->
            <div class="nav-user-wrapper">
              <div class="nav-user-list">
                <dl class="nav-user-avatar">
                  <dd><span class="ng-scope"></span></dd>
                  <dt class="ng-binding">+86 138****9453</dt>
                </dl>
                <ul>
                  <li class="order">
                    <router-link to="/account/order">我的订单</router-link>
                  </li>
									<li class="address">
                    <router-link to="/account/address">收货地址</router-link>
                  </li> 
                  <li class="logout"><a href="javascript:;">退出</a></li>
                </ul>
              </div>
            </div>
          </li>
          <!--active-->
          <li class="nav-cart">
            <a href="javascript:;">购物车</a>
            <!--根据class改变颜色-->
            <span class="cart-empty-num cart-num">
              <i>{{allInfo.allNum}}</i>
            </span>
            <!-- 此处展示导航栏购物车 -->
            <NavCart/>
          </li>
        </ul>
        <ul class="nav-list">
          <li><a href="javascript:;">在线商城</a></li>
          <li><a href="javascript:;">坚果 Pro</a></li>
          <li><a href="javascript:;">Smartisan M1 / M1L</a></li>
          <li><a href="javascript:;">Smartisan OS</a></li>
          <li><a href="javascript:;">欢喜云</a></li>
          <li><a href="javascript:;">应用下载</a></li>
          <li><a href="javascript:;">官方论坛</a></li>
        </ul>
      </div>
    </div>
    <div class="nav-sub">
      <div class="nav-sub-wrapper">
        <div class="container">
          <ul class="nav-list">
            <li><a href="javascript:;">首页</a></li>
            <li><a href="javascript:;">手机</a></li>
            <li><a href="javascript:;">“足迹系列”手感膜</a></li>
            <li class="active"><a href="javascript:;">官方配件</a></li>
            <li><a href="javascript:;">周边产品</a></li>
            <li><a href="javascript:;">第三方配件</a></li>
            <li><a href="javascript:;">全部商品</a></li>
            <li><a href="javascript:;">服务</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavCart from './NavCart.vue'
export default {
  components: {
    NavCart,
  },
  computed: {
    allInfo() {
      return this.$store.getters['cart/allInfo'] 
    }
  },
};
</script>

<style lang="less" scoped>
@import url('../assets/css/header.css');
.nav-cart-wrapper{
  display: none;
  visibility: visible;
  opacity: 1;
  top: 20px;
}
.nav-cart:hover .nav-cart-wrapper{
  display: block;
}
</style>
